<template>
  <view class="yun-content">
    <headerVue title="个人中心" active="个人中心"></headerVue>
    <view class="yun-main" :style="{marginTop:systemBarHeight+'px'}">
      <!-- 用户 -->
      <view class="header">
        <u-avatar :src="userInfo.avatar" shape="circle" :size="120" @click="handleAvatar"/>
        <view class="header-right">
          <div class="user-name" v-if="userInfo.nickname">{{ userInfo.nickname }}</div>
          <button v-else-if="openid" @click="handleLogin" class="user-name" hover-class="yun-hover" type="primary">
            点击登录小管家
          </button>
          <button v-else class="user-name" hover-class="yun-hover" type="primary" open-type="getPhoneNumber"
                  @getphonenumber="getPhoneNumber">
            点击登录小管家
          </button>
          <!-- <view class="user-name" @click="handleLogin">点击登录小管家</view> -->
          <view class="user-id">Id：{{ userInfo.phone ? userInfo.phone : '--------' }}</view>
        </view>
      </view>

      <!-- <image style="color: pink;" src="@/static/svg/vip.svg" /> -->

      <!-- 会员 -->
      <view class="vip">
        <view class="vip-left">
          <view class="vip-name">
            <u--image :showLoading="true" src="/static/icon-img/icon-vip.png" width="36rpx" height="36rpx"/>
            <text style="margin-left: 10rpx;color: #F1D9C1;">管家会员</text>
          </view>
          <view class="vip-time">有效期至：限时免费</view>
        </view>
        <view class="vip-right">
          立即加入
          <u--image :showLoading="true" src="/static/icon-img/icon-hidden.png" width="12rpx" height="12rpx"/>
        </view>
      </view>
      <!-- 功能 -->
      <view class="owned">
        <view class="owned-item" hover-class="yun-hover">
          <u--image :showLoading="true" src="/static/icon-img/icon-number.png" width="36rpx" height="36rpx"/>
          <view class="owned-right">
            <view class="owned-name">我的日程</view>
            <view class="_right">
              8个待完成
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </view>
        <view class="owned-item" hover-class="yun-hover">
          <u--image :showLoading="true" src="/static/icon-img/icon-email.png" width="36rpx" height="36rpx"/>
          <view class="owned-right">
            <view class="owned-name">我的人情</view>
            <view class="_right">
              未录入
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </view>
        <view class="owned-item" hover-class="yun-hover">
          <u--image :showLoading="true" src="/static/icon-img/icon-id.png" width="36rpx" height="36rpx"/>
          <view class="owned-right">
            <view class="owned-name">EQ收录夹</view>
            <view class="_right">
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </view>
      </view>
      <!-- 登录后才有功能 -->
      <view class="owned" style="margin-top: 30rpx;">
        <button open-type="share" class="owned-item btn" hover-class="yun-hover">
          <u--image :showLoading="true" src="/static/icon-img/icon-number.png" width="36rpx" height="36rpx"/>
          <view class="owned-right">
            <view class="owned-name">分享给好友</view>
            <view class="_right">
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </button>
        <view class="owned-item" hover-class="yun-hover" @click="handleHelp">
          <u--image :showLoading="true" src="/static/icon-img/icon-email.png" width="36rpx" height="36rpx"/>
          <view class="owned-right">
            <view class="owned-name">帮助与反馈</view>
            <view class="_right">
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </view>
        <view class="owned-item" hover-class="yun-hover" @click="handleProtocol">
          <u--image :showLoading="true" src="/static/icon-img/icon-id.png" width="36rpx" height="36rpx"/>
          <view class="owned-right">
            <view class="owned-name">用户协议</view>
            <view class="_right">
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </view>
        <view class="owned-item" hover-class="yun-hover" @click="handlePrivacy">
          <u--image :showLoading="true" src="/static/icon-img/icon-edit.png" width="36rpx" height="36rpx"/>
          <view class="owned-right">
            <view class="owned-name">隐私协议</view>
            <view class="_right">
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </view>
        <view class="owned-item" hover-class="yun-hover">
          <u--image :showLoading="true" src="/static/icon-img/icon-setting.png" width="36rpx" height="36rpx"/>
          <view class="owned-right">
            <view class="owned-name">设置</view>
            <view class="_right">
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </view>
        <view v-if="false" class="owned-item" hover-class="yun-hover" @click="getUserData">
          <u-icon name="setting" size="50"/>
          <view class="owned-right">
            <view class="owned-name">测试获取用户信息</view>
            <view class="_right">
              <u-icon name="arrow-right" size="30"/>
            </view>
          </view>
        </view>
      </view>

      <view v-if="userInfo.nickname" plain class="logout" hover-class="yun-hover" @click.stop="logout">
        退出登录
      </view>
    </view>
    <u-no-network/>
  </view>
</template>

<script>
import {
  mapGetters
} from 'vuex';
import headerVue from '@/pages/header/header.vue';
import {
  userLogin
} from '@/xiaoyun/api/user.js'
import {
  loginFn,
  getUserInfo,
  queryOpenIdFn
} from '@/xiaoyun/login.js'

export default {
  components: {
    headerVue
  },
  computed: {
    ...mapGetters('plugins', ['systemBarHeight']),
    ...mapGetters('user', ['userInfo', 'openid'])
  },
  data() {
    return {}
  },
  onLoad() {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage']
    });
  },
  methods: {
    handleHelp() {
      uni.navigateTo({
        url: '/pages/subpackage/user/components/help'
      })
    },
    // 点击头像 -> 编辑个人信息
    handleAvatar() {
      console.log('嘤嘤嘤编辑个人信息')
      uni.navigateTo({
        url: '/pages/subpackage/user-edit/index'
      })
    },
    // 分享按钮
    onButtonShare() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession', // 分享到朋友（可修改为 WXSceneTimeline 分享到朋友圈）
        type: 0,
        summary: '会员权益',
        imageUrl: '/static/img/share.png', // 分享的图片路径，可根据需要修改
        href: '/pages/subpackage/user/index', // 分享的页面路径，可根据需要修改
        success: (res) => {
          console.log('分享成功', res);
        },
        fail: (err) => {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
            duration: 3000
          });
        }
      });
    },
    // 分享给朋友
    onShareAppMessage() {
      return {
        title: '会员权益',
        path: '/pages/subpackage/user/index', // 分享的页面路径，可根据需要修改
        imageUrl: '/static/img/share.png' // 分享的图片路径，可根据需要修改
      };
    },
    getUserData() {
      uni.getUserProfile({
        desc: '用户登录',
        success: res => {
          console.log(res) // 用户的信息
          this.user_name = res.userInfo.nickName // 微信昵称
          uni.showToast({
            title: res.userInfo.nickName,
            icon: 'none',
            duration: 5000
          });
        }
      })
    },
    // 登录
    handleLogin() {
      this.$store.dispatch('user/login')
    },
    getPhoneNumber(e) {
      console.log('获取手机号', e);
      uni.showLoading({
        title: '登录中'
      })
      if (e.detail.code) {
        loginFn().then(res => {
          this.login(e, res)
        }).catch(err => {
          uni.showToast({
            title: '获取登录信息失败，请重新打开小程序或者使用其他登录方式',
            icon: 'fail',
            duration: 3000
          });
        }).finally(() => {
          uni.hideLoading()
        })
      } else {
        uni.hideLoading()
        uni.showToast({
          title: '获取手机号码失败',
          icon: 'fail',
          duration: 3000
        });
      }
    },
    login(e, code) {
      console.log('e,code', e, code);
      userLogin({
        login_type: 'phone',
        appid: 'wx1e3cf4547f6354a3',
        code: code,
        iv: e.detail.iv,
        encryptedData: e.detail.encryptedData
      }).then(res => {
        if (res.code === 200) {
          // 用户信息
          this.$store.commit('user/SET_USER_INFO', res.data)
          uni.setStorageSync('chamberlain_user_info', res.data)
          this.$store.commit('user/SET_OPENID', res.data.openid)
          uni.setStorageSync('chamberlain_openid', res.data.openid)
          console.log('this.userInfo', this.userInfo);
          // 登录状态
          this.$store.commit('user/SET_LOGIN_STATUS', true)
          uni.setStorageSync('chamberlain_login_status', true)
        }
        uni.showToast({
          title: res.msg,
          duration: 1500
        });
      }).catch(err => {
        uni.showToast({
          title: res.msg,
          icon: 'fail',
          duration: 3000
        });
      })
    },
    // 用户协议
    handleProtocol() {
      uni.navigateTo({
        url: "/pages/subpackage/user/components/protocol"
      })
    },
    // 帮助与反馈按钮
    handlePrivacy() {
      uni.navigateTo({
        url: "/pages/subpackage/user/components/privacy"
      })
    },
    // 退出登录
    logout() {
      this.$store.commit('user/SET_USER_INFO', {})
      uni.setStorageSync('chamberlain_user_info', {})
      this.$store.commit('user/SET_LOGIN_STATUS', false)
      uni.setStorageSync('chamberlain_login_status', false)
      uni.showToast({
        title: '退出登录成功',
        icon: 'none',
        duration: 1500
      });
    }
  },

}
</script>

<style scoped lang="scss">
.yun-main {
  padding-bottom: 50rpx;
}

.header {
  display: flex;
  margin: 30rpx 0;

  .header-right {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10rpx 0;

    .user-name {
      font-weight: 700;
      font-size: 40rpx;
      padding: 0;
      background-color: transparent;
      line-height: 1.5;
      text-align: left;
      color: #000;
      margin: 0;

      &::after {
        width: auto;
        padding: auto;
        height: auto;
        border: none;
      }
    }

    .user-id {
      font-size: 26rpx;
      color: #666666;
    }
  }
}

.vip {
  width: 86%;
  margin: 0 auto;
  background: linear-gradient(90deg, #403D49 0%, #525868 100%);
  box-shadow: 0 1px 5px 0 #4b4e5c3d;
  overflow: hidden;
  padding: 18rpx 30rpx;
  border-radius: 12rpx 12rpx 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  &::before,
  &::after {
    content: '';
    /* 伪元素需要的内容属性 */
    position: absolute;
    /* 绝对定位 */
    background-repeat: no-repeat;
    /* 防止图片重复 */
    background-size: cover;
    /* 覆盖伪元素区域 */
    z-index: 0;
    /* 确保伪元素在容器背景之上 */
    background-image: url('/static/icon-img/icon-vip.png');
    opacity: 0.25;
  }

  &::before {
    content: 'V';
    left: -12rpx;
    top: -20rpx;
    -webkit-background-clip: text;
    font-size: 6em;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    z-index: 9;
    color: #ffffff;
    background-clip: text;
    transform: scaleX(1.5);
    opacity: 0.08;
  }

  &::after {
    width: 150rpx;
    height: 150rpx;
    bottom: -46rpx;
    right: 15rpx;
  }

  .vip-name {
    display: flex;
    align-items: center;
  }

  .vip-time {
    font-size: 24rpx;
    margin-top: 8rpx;
    color: #F1D9C1;
  }

  .vip-right {
    font-size: 24rpx;
    display: flex;
    align-items: center;
    color: #F1D9C1;
  }
}

.owned {
  background-color: #fff;
  box-shadow: 0 1.5px 4px 0 #00000005;

  .owned-item {
    display: flex;
    align-items: center;
    padding-left: 20rpx;

    &:last-child .owned-right {
      border-color: transparent;
    }

    &.btn {
      line-height: 0;
      background: transparent;
      border: 0;
      font-size: 28rpx;
      padding-right: 0;

      &::after {
        border: none;
      }
    }

    .owned-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 20rpx;
      height: 100%;
      padding: 30rpx 20rpx 30rpx 0;
      border-bottom: 1px solid #f1f1f1;

      ._right {
        display: flex;

        ::v-deep .u-icon {
          margin-left: 6rpx;
        }
      }
    }
  }
}

.logout {
  color: #FF7733;
  margin-top: 40rpx;
  background-color: #fff;
  text-align: center;
  padding: 20rpx;
  cursor: pointer;

  &:hover {
    color: orangered;
  }
}
</style>